<template>
  <div class="w-[100%] h-[100vh] overflow-hidden flex justify-center items-center">
    <div class="form-container">
    <template v-if="status.valueOf() === EStatus.login">
      <h2 class="text-[22px] mb-[10px]">登录</h2>
      <el-form
        label-position="left"
        :label-width="60"
        :model="loginForm"
        label-width="120px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <div class="flex justify-center">
          <el-button type="primary" @click="changeStatus(EStatus.register)"
            >去注册</el-button
          >
          <el-button type="primary" @click="handleLogin">登录</el-button>
        </div>
      </el-form>
    </template>
    <template v-else>
      <h2 class="text-[22px] mb-[10px]">注册</h2>
      <el-form
        label-position="left"
        :label-width="60"
        :model="registerForm"
        label-width="120px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="registerForm.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="registerForm.password"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <div class="flex justify-center">
          <el-button type="primary" @click="changeStatus(EStatus.login)"
            >去登录</el-button
          >
          <el-button type="primary" @click="handleRegister">注册</el-button>
        </div>
      </el-form>
    </template>
  </div>
  </div>
 
</template>

<script>
import { ref, inject } from "vue";
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from "element-plus";
import Api from "@/api";
import {useRouter} from "vue-router"

export default {
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup() {
    const globalState = inject('globalState');
    const router = useRouter()
    const EStatus = {
      login: 1,
      register: 2,
    };
    const status = ref(EStatus.login);
    const changeStatus = (_status) => {
      status.value = _status;
    };
    const loginForm = ref({
      username: "",
      password: "",
    });

    const registerForm = ref({
      username: "",
      password: "",
    });

    const handleLogin = async () => {
      // 处理登录逻辑
      const res = await Api.login(loginForm.value);
      if (res.code !== 0) {
        return ElMessage.error(res.message || "出现错误");
      }
      globalState.username = res.username;
      localStorage.setItem("username", res.username);
      ElMessage({
        message: "登录成功",
        type: "success",
      });
      router.replace("/")
    };

    const handleRegister = async () => {
      // 处理注册逻辑
      const res = await Api.register(registerForm.value);
      if (res.code !== 0) {
        return ElMessage.error(res.message || "出现错误");
      }
      ElMessage({
        message: "注册成功",
        type: "success",
      });
      changeStatus(EStatus.login)
      console.log(res);
    };

    return {
      loginForm,
      registerForm,
      handleLogin,
      handleRegister,
      status,
      EStatus,
      changeStatus,
    };
  },
};
</script>

<style lang="scss">
.form-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .el-form-item {
    margin-bottom: 20px;

    &.is-required .el-form-item__label {
      color: #ff4d4f;
    }

    .el-form-item__label {
      font-weight: bold;
      color: #333;
    }

    .el-input {
      width: 100%;
    }

    .el-button {
      width: 100%;
    }
  }

  .el-button--primary {
    background-color: #409eff;
    border-color: #409eff;

    &:hover {
      background-color: #66b1ff;
      border-color: #66b1ff;
    }
  }
}
</style>
